<template>
	<view class="my-login">
		<!-- 人物图标 -->
		<uni-icons type="contact-filled" size="100" color="#afafaf"></uni-icons>
		<!-- 登录按钮 -->
		<view class="btn">
			<button class="mybtn" open-type="getUserInfo" @getuserinfo="getuserinfo">一键登录</button>
		</view>
		<!-- info -->
		<view class="info">登录后尽享更多权益</view>
	</view>
</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {

		computed: {
			...mapState('address', ['userInfo', 'token', 'redirectInfo'])
		},
		name: "my-login",
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('address', ['getUserInfo', 'setToken', 'getrRedirectInfo']),
			async getuserinfo(e) {
				console.log(e);
				this.getUserInfo(e.detail.userInfo)

				let params = {
					encryptedData: e.detail.encryptedData,
					rawData: e.detail.rawData,
					iv: e.detail.iv,
					signature: e.detail.signature
				}
				const [err, loginRes] = await uni.login()
				// console.log(loginRes);
				if (err) return uni.$showMag('获取信息失败')
				params.code = loginRes.code
				let {
					data: tokenRes
				} = await uni.$http.post('/api/public/v1/users/wxlogin', params)
				// console.log(tokenRes);
				this.setToken('token')
				if (this.redirectInfo.openType) {
					console.log(this.redirectInfo.url);
					uni.switchTab({
						url: this.redirectInfo.url
					})
					this.getrRedirectInfo({})
				}
			}
		}
	}
</script>

<style lang="scss">
	.my-login {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200rpx;

		.btn {
			padding: 30rpx 50rpx;
			width: 100%;
			box-sizing: border-box;

			.mybtn {
				background-color: #c00000;
				color: #fff;
				border-radius: 100rpx;
			}
		}

		.info {
			font-size: 12px;
			color: #bab5b2;
		}
	}
</style>
